<template>
  <div v-loading="loading" class="loginBox">
    <div class="loginBoxContent">
      <div class="loginBoxContentImg">Demo</div>
      <div class="loginBoxContentForm">
        <div class="loginBoxContentEq">
          <div v-if="RQCode" class="loginBoxContentEqBox" @click="RQCode=false">
            <!-- <img class="eq" src="@/assets/images/pc.png" alt=""> -->
            <!-- <img class="msg" src="@/assets/images/pcMsg.png" alt=""> -->
          </div>
          <div v-else class="loginBoxContentEqBox">
            <!-- <img class="eq" src="@/assets/images/phone.png" alt="" @click="RQCode=true"> -->
            <!-- <img class="msg" src="@/assets/images/phoneMsg.png" alt=""> -->
          </div>
        </div>
        <p class="loginConTitle ">您好！欢迎{{ RQCode?'下载':'登录' }}使用</p>
        <p class="loginConTitlePt loginConTitlePtB">管理系统</p>
        <div v-if="RQCode" class="loginBoxContentFormConRQCode">
          <!-- <img src="@/assets/images/qrCode.png" alt="" style="width:100%;height: 100%"> -->
        </div>
        <div v-else class="loginBoxContentFormCon">
          <el-form ref="loginForm" :model="form" :rules="loginRules" class="formCon">
            <el-form-item prop="username">
              <el-input v-model.trim="form.username" class="userCin username" placeholder="账号" @keyup.delete.native="userNameChange"></el-input>
            </el-form-item>
            <el-form-item prop="password" class="m-px-b-0">
              <el-input v-model.trim="form.password" type="password" class="userCin password" placeholder="密码"></el-input>
            </el-form-item>
          </el-form>
          <div class="p-px-b-24 p-px-t-24">
            <el-checkbox v-model.trim="save" style="margin-top: 1px;" class="keep-login">记住密码</el-checkbox>
          </div>
          <el-button type="primary" class="loginBtn" size="small" @click="handleLogin">登录</el-button>
        </div>

      </div>
    </div>

    <!-- <p>用验证码</p> -->
    <Slider ref="Slider"></Slider>
  </div>
</template>
<script>
import settings from '@/settings'
import Slider from '@/views/login--bao--Y/components/slider.vue'
import { cyptoTool } from '@/views/login--bao--Y/components/cyptoTool'
import { methodGetApi } from '@/api/publicApi'
export default {
  name: 'Login',
  components: { Slider },
  mixins: [cyptoTool],
  provide() {
    return {
      loginProvide: this
    }
  },
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (!validUsername(value)) {
    //     callback(new Error('用户名错误'))
    //   } else {
    //     callback()
    //   }
    // }
    // const validatePassword = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error('密码至少六位'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      RQCode: false,
      save: false,
      settings,
      form: {
      },
      createVcode: null,
      loginRules: {
        username: [{ required: true, trigger: 'change', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
      },
      loading: false
    }
  },

  mounted() {
    this.$refs['Slider'].getImg()
  },
  created() {
    var loginInfo = localStorage.getItem('login')
    if (loginInfo != null && loginInfo !== '') {
      this.form = JSON.parse(loginInfo)
      this.form.username = this.decrypt(this.form.username)
      this.form.password = this.decrypt('Y4yhl9t@123')
      this.save = true
    }
  },
  methods: {
    // /**
    //  * @description: 登录用户名更改后,密码清除
    //  * @Author: baoxuhui
    //  * @return {*}
    //  */
    // userNameChange() {
    //   this.form.password = null
    // },
    /**
     * @description: 登录操作
     * @Author: baoxuhui
     * @return {*}
     */
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$refs['Slider'].reset()
          this.$refs['Slider'].showSlider = true
        }
      })
    },
    /**
     * @description: 验证完后的登录事件
     * @Author: baoxuhui
     * @return {*}
     */
    saveLogin() {
      const data = {
        username: this.encrypt(this.form.username),
        password: this.encrypt(this.form.password)
      }
      this.$refs['Slider'].showSlider = false
      this.$store.dispatch('user/login', data).then(() => {
        var isSave = this.save
        if (isSave) {
          var loginForm = data
          localStorage.setItem('login', JSON.stringify(loginForm))
        } else {
          localStorage.removeItem('login')
        }// 保存登录信息
        this.getUserPath()
        // 提示修改初始密码
        localStorage.setItem('isWeakPasswordNum', 0)
      }).catch(() => {
        this.loading = false
        this.$refs['Slider'].getImg()// 重刷验证码
      })
    },
    /**
     * @description: 跳转信息
     * @Author: baoxuhui
     * @param {*} data
     * @return {*}
     */
    getUserPath(data) {
      console.log(data)
      const url = '/getUserPath'
      methodGetApi(url, data).then(res => {
        localStorage.setItem('indexPath', res.data.path)
        this.$router.push({ path: res.data.path })
      })
    }
  }
}
</script>
<style lang="scss" >
@import "~@/assets/styles/publicStyles/Hlstyle";
.loginBox{
  width:100% ;
  height: 100%;
  // background: url('~@/assets/images/loginBg.png') no-repeat center center;
  // background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .loginBoxContent{
    width: 120rem;
    height: 64rem;
    background:#fff;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .loginBoxContentImg{
    width:73rem;
    height: 100%;
    font-size: 20rem;
    display: contents;
    // background: url('~@/assets/images/loginBoxContentImg.png') no-repeat center center;
    // background-size: 100% 100%;
    }
    .loginBoxContentForm{
      width:calc(100% - 73rem);
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      // display:inline-block;
      padding: 0 6.5rem;
      position: relative;
      .loginBoxContentFormCon{
        height: auto;
        width: 100%;
      }
      .loginBoxContentFormConRQCode{
          height: calc(#{$input-inner-height} + #{$input-inner-height} + 18px + 4.8rem + #{$input-inner-height} + #{$input-inner-height});
         width: calc(100% - 12.6rem );
         margin: 0 auto;
      }
      .loginConTitle{
        width: 100%;
        color: rgba(0,0,0,0.5);
        font-size: 1.8rem;
        margin-bottom: 1.2rem;
      }
      .loginConTitlePt{
           width: 100%;
        color: rgba(0,0,0,1);
        font-size: 2.6rem;

      }
      .loginConTitlePtB{
          margin-bottom: 4.2rem;
      }
      .formCon{
        width: 100%;
        display: block;
         .username{
          .el-input__inner{
          padding:0 30px;
          // background:#ffffff29 url(~@/assets/images/userIcon.png) no-repeat 10px;
          // background-size: 15px  15px;
          }
      }
      .password{
          .el-input__inner{
          padding:0 30px;
          // background:#ffffff29 url(~@/assets/images/passIcon.png) no-repeat 10px;
          // background-size: 15px  15px;
          }
      }
      }
      .loginBoxContentEq{
        position: absolute;
        right: 0;
        top: 0;
        .loginBoxContentEqBox{
          position: relative;
          .eq{
            width: 90px;
            height: 90px;
            position: absolute;
            right:10px;
            top: 10px;
            cursor: pointer;
          }
          .msg{
            // width: 100px;
            height: 24px;
            position: absolute;
            right: 63px;
            top: 42px;
          }
        }
      }
    }
    .loginBtn{
      width: 100%;
    }
  }
}
</style>
